// 示例代码
<template>
  <div>
    <el-form class="login-ruleForm">
      <el-form-item>
        <el-input v-model="username" type="text" placeholder="Username" />
        <template #prefix>
          <icon-user theme="outline" size="16" fill="#999" />
        </template>
      </el-form-item>
      <el-form-item>
        <el-input v-model="password" type="password" placeholder="Password" />
        <template #prefix>
          <icon-lock theme="outline" size="16" fill="#999" />
        </template>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="login1">登录</el-button>
        <el-button class="login-btn" type="primary">管理员登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      login1() {
        console.log(this.username);
        console.log(this.password);
        axios({
          method: 'post',
          url: 'http://127.0.0.1:8000/admin/login',
          data: {
            username: this.username,
            password: this.password,
          },
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
          },
        })
          .then((res) => {
            console.log('请求成功');
            console.log(res);
            // 处理响应
            // 存储 用户id
            localStorage.setItem('user_id', res.data.id);
            // 导航到主页
            this.$router.push('/search')
          })
          .catch((error) => {
            console.log('请求失败');
            console.log('error');
          });
      },
    },
  };
</script>

<style>
  .login-ruleForm {
    margin-top: 1rem;
    :deep(.el-input__prefix) {
      top: 2px;
      padding: 0 4px;
    }
    .login-methods {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .login-btn {
      width: 100%;
      display: flex;
      align-content: center;
      justify-content: space-between;
    }
    .login-check {
      width: 100%;
      display: flex;
      align-content: center;
      justify-content: space-between;
    }
  }
</style>
